<template>
  <div class="full grey-bg">
    <div v-show="hasAccess && loaded" :style="outterStyle">
      <div class="weui-panel info-top">
        <div class="weui-grids">
          <!-- <router-link :to="{name: 'DrawMoney'}" class="weui-grid">
            <div class="mt-22 head-block">
              <div class="info-top-grid">
                <img src="img/jinbi.png" class="img-icon" alt="">
                <span>{{ user.balance }}</span>
              </div>
              <p class="weui-grid__label mt-15">
                提现
              </p>
            </div>
          </router-link> -->
          <a class="weui-grid">
            <div class="head-block">
              <div class="info-top-grid">
                <img src="img/jinbi.png" class="img-icon" alt="">
                <span>{{ user.balance }}</span>
              </div>
              <p class="weui-grid__label mt-15">
                上月佣金
              </p>
            </div>
          </a>
          <a class="weui-grid no-padding-bottom">
            <div class="user-img">
              <img :src="user.headUrl" alt="">
            </div>
            <!-- weui-grid__label 文字加省略号-->
            <div class="userinfo-box">
               <p class=" no-margin-top userinfo">
              {{ user.nickname }} 
              <span style="font-size: 12px;">
                ({{ userType }})
              </span>
            </p>
            <p class=" no-margin-top userinfo" >
              邀请码: {{ user.lftid }}
            </p>
            </div>
           
          </a>
          <a class="weui-grid" @click="gotoBuyHistory()">
            <div class="head-block">
              <div class="info-top-grid">
                <img src="img/diamonds.png" class="img-icon" alt="">
                <span>{{ user.gameAmount }}</span>
              </div>
              <p class="weui-grid__label mt-15">
                现有钻石
              </p>
            </div>
          </a>
        </div>
      </div>
      <div v-show="noticeSty" class="notice-content" :style="marqueenStyle">
        <img src="../img/laba1.png" style="height:22px;width: 22px;position:absolute;">
        <!-- {{noticeContent}} -->
        <span style="display: block;color: white;font-size:16px;white-space:nowrap;margin-left:30px;">{{noticeContent}}</span>
      </div>
      <div class="weui-cells" @click="playSound">
        <router-link class="weui-cell weui-cell_access grey-border-bottom" to="/myPlayers"  tag="div">
          <!--  -->
          <div class="weui-cell__hd">
            <img src="img/play.png">
          </div>
          <div class="weui-cell__bd">
            <p>我的玩家({{playerCount}}人)</p>
          </div>
          <div class="weui-cell__ft"></div>
        </router-link>
        <div class="weui-grids info-middle" @click="playSound">
          <router-link class="am-u-sm-3" :to="{name: 'diamondsDetail', query: {types: 1}}">
            <p>今日</p>
            <p><span class="diamonds-number">{{ toTwoFifth(player.todaySales) }}</span> 元</p>
          </router-link>
          <router-link class="am-u-sm-3" :to="{name: 'diamondsDetail', query: {types: 4}}">
            <p>昨日</p>
            <p><span class="diamonds-number">{{ toTwoFifth(player.yesterdaySales) }}</span> 元</p>
          </router-link>
          <router-link class="am-u-sm-3" :to="{name: 'diamondsDetail', query: {types: 2}}">
            <p>本月</p>
            <p><span class="diamonds-number">{{ toTwoFifth(player.monthSales) }}</span> 元</p>
          </router-link>
          <router-link class="am-u-sm-3" :to="{name: 'diamondsDetail', query: {types: 3}}">
            <p>上月</p>
            <p><span class="diamonds-number">{{ toTwoFifth(player.lastMonthSales) }}</span> 元</p>
          </router-link>
        </div>
      </div>

      <div class="weui-cells" v-if="notSecond" @click="playSound">
        <router-link class="weui-cell weui-cell_access grey-border-bottom" :to="{name: 'myTeamMember'}" tag="div">
          <!--  -->
          <div class="weui-cell__hd">
            <img src="img/team.png">
          </div>
          <div class="weui-cell__bd">
            <p>我的团队({{teamCount}}人)</p>
          </div>
          <div class="weui-cell__ft"></div>
        </router-link>
        <div  class="weui-grids info-middle">
          <router-link :class="showSecond ? 'am-u-sm-3' : 'am-u-sm-6'" :to="{name: 'myTeam', query: {types: 4}}">
            <p>平级</p>
            <p><span class="diamonds-number">{{ toTwoFifth(team.proxyLevelEqual.month) }}</span><span class="info-grey text-small">(本月)</span></p>
            <!-- <p class="info-grey border-line">(本月)</p> -->
            <p><span class="diamonds-number">{{ toTwoFifth(team.proxyLevelEqual.lastmonth) }}</span><span class="info-grey text-small">(上月)</span></p>
            <!-- <p class="info-grey">(上月)</p> -->
          </router-link>
          <router-link :class="showSecond ? 'am-u-sm-3' : 'am-u-sm-6'" v-if="showSecond" :to="{name: 'myTeam', query: {types: 1}}">
            <p>直属一级</p>
            <p><span class="diamonds-number">{{ toTwoFifth(team.proxyLevelOne.month) }}</span><span class="info-grey text-small">(本月)</span></p>
            <p><span class="diamonds-number">{{ toTwoFifth(team.proxyLevelOne.lastmonth) }}</span><span class="info-grey text-small">(上月)</span></p>
          </router-link>
          <router-link :class="showSecond ? 'am-u-sm-3' : 'am-u-sm-6'" :to="{name: 'myTeam', query: {types: 2}}">
            <p>直属二级</p>
            <p><span class="diamonds-number">{{ toTwoFifth(team.proxyLevelTwo.month) }}</span><span class="info-grey text-small">(本月)</span></p>
            <p><span class="diamonds-number">{{ toTwoFifth(team.proxyLevelTwo.lastmonth) }}</span><span class="info-grey text-small">(上月)</span></p>
          </router-link>
          <router-link :class="showSecond ? 'am-u-sm-3' : 'am-u-sm-6'" v-if="showSecond" :to="{name: 'myTeam', query: {types: 3}}">
            <p>间接二级</p>
            <p><span class="diamonds-number">{{ toTwoFifth(team.proxyLevelThree.month) }}</span><span class="info-grey text-small">(本月)</span></p>
            <p><span class="diamonds-number">{{ toTwoFifth(team.proxyLevelThree.lastmonth) }}</span><span class="info-grey text-small">(上月)</span></p>
          </router-link>
        </div>
      </div>

      <!--  <div class="weui-cells">
        <router-link class="weui-cell weui-cell_access" tag="div" to="/myGroup">
          <div class="weui-cell__hd">
            <img src="img/group.png">
          </div>
          <div class="weui-cell__bd">
            <p>俱乐部</p>
          </div>
          <div class="weui-cell__ft"></div>
        </router-link>
      </div> -->
      <div class="weui-cells" @click="playSound">
        <router-link class="weui-cell weui-cell_access" tag="div" to="/agentDesc">
          <div class="weui-cell__hd">
            <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
              <path d="M0 0h24v24H0z" fill="none" />
              <path fill="#49e187" d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 15h-2v-6h2v6zm0-8h-2V7h2v2z" /></svg>
          </div>
          <div class="weui-cell__bd">
            <p>代理制度介绍</p>
          </div>
          <div class="weui-cell__ft"></div>
        </router-link>
      </div>
      <div class="weui-cells" v-if="isSalesman" @click="playSound">
        <!-- <router-link :to="{ name: 'agentRun', params: { uid: user.uid }}"> -->
        <!-- <router-link class="weui-cell weui-cell_access" tag="div" to="/agentRun"> -->
        <div class="weui-cell ">
          <!-- <router-link class="weui-cell weui-cell_access" tag="div" :to="{ name: 'agentRun', params: { uid: user.uid }}"> -->
          <div class="weui-cell__hd">
            <img src="img/dlzs.png">
          </div>
          <div class="weui-cell__bd">
            <p class="deep-title">
              <span>线路业绩</span>
              <span class="right-border deep-padding">
                <span class="diamonds-number">{{ team.proxyLevelFive.month }}</span>
                <span class="info-grey text-small">(本月)</span>
              </span>
              <span class="deep-padding">
                <span class="diamonds-number">{{ team.proxyLevelFive.lastmonth }}</span>
                <span class="info-grey text-small">(上月)</span>
              </span>
            </p>
          </div>
          <div class="weui-cell__ft"> </div>
          <!-- </router-link> -->
        </div>
      </div>
      <div class="weui-cells" @click="playSound">
        <router-link class="weui-cell weui-cell_access" tag="div" to="/editPswd">
          <div class="weui-cell__hd">
            <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
              <path d="M0 0h24v24H0z" fill="none" />
              <path fill="#ff5f5f" d="M18 8h-1V6c0-2.76-2.24-5-5-5S7 3.24 7 6v2H6c-1.1 0-2 .9-2 2v10c0 1.1.9 2 2 2h12c1.1 0 2-.9 2-2V10c0-1.1-.9-2-2-2zm-6 9c-1.1 0-2-.9-2-2s.9-2 2-2 2 .9 2 2-.9 2-2 2zm3.1-9H8.9V6c0-1.71 1.39-3.1 3.1-3.1 1.71 0 3.1 1.39 3.1 3.1v2z" /></svg>
          </div>
          <div class="weui-cell__bd">
            <p>登录密码修改</p>
          </div>
          <div class="weui-cell__ft"></div>
        </router-link>
      </div>
      <div class="weui-cells" @click="playSound">
        <router-link class="weui-cell weui-cell_access" tag="div" to="/substitudeTopup">
          <div class="weui-cell__hd">
            <svg style="width: 1.25em; height: 1em;vertical-align: middle;fill: currentColor;overflow: hidden;" viewBox="0 0 1280 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2144">
              <path fill="#00bcd4" d="M1209.619852 332.793928 1017.61413 76.786291C1012.685977 70.194094 1005.389764 65.777962 997.261525 64.433922L613.250065 0.432013C609.793961-0.144004 606.209855-0.144004 602.753752 0.432013L218.742296 64.433922C210.614052 65.777962 203.317835 70.194094 198.389688 76.786291L6.38396 332.793928C-2.768313 345.018293-2.00029 362.042801 8.176013 373.371138L584.193197 1013.390233C590.273379 1020.110429 598.913636 1024.014548 608.001908 1024.014548 617.090179 1024.014548 625.730437 1020.174437 631.810618 1013.390233L1207.827801 373.371138C1218.068108 361.978799 1218.836134 345.018293 1209.619852 332.793928L1209.619852 332.793928ZM818.312182 319.993546 608.001908 898.378805 397.691634 319.993546 818.312182 319.993546 818.312182 319.993546ZM429.244575 255.991637 608.001908 77.234304 786.759241 255.991637 429.244575 255.991637 429.244575 255.991637ZM701.25269 79.986386 937.931751 119.411562 859.017397 237.751093 701.188688 79.986386 701.25269 79.986386ZM356.98642 237.751093 278.072065 119.411562 514.751126 79.986386 356.98642 237.751093 356.98642 237.751093ZM298.872686 265.975935 107.826986 304.185075 222.454406 151.348515 298.872686 265.975935 298.872686 265.975935ZM331.321654 324.79369 521.663332 848.265306 93.362554 372.347109 331.321654 324.729688 331.321654 324.79369ZM884.682165 324.79369 1122.64126 372.41111 694.340484 848.329308 884.682165 324.857691 884.682165 324.79369ZM917.131129 265.975935 993.549414 151.348515 1108.176834 304.185075 917.131129 265.975935 917.131129 265.975935Z" p-id="2145"></path>
            </svg>
          </div>
          <div class="weui-cell__bd">
            <p>代充钻石</p>
          </div>
          <div class="weui-cell__ft"></div>
        </router-link>
      </div>
      <div class="weui-cells" @click="playSound">
        <router-link class="weui-cell weui-cell_access" tag="div" to="/PersonalInfo">
          <div class="weui-cell__hd">
            <svg aria-hidden="true" data-prefix="fas" data-icon="user-edit" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 640 512" class="info-icon">
              <path fill="currentColor" d="M224 256c70.7 0 128-57.3 128-128S294.7 0 224 0 96 57.3 96 128s57.3 128 128 128zm89.6 32h-16.7c-22.2 10.2-46.9 16-72.9 16s-50.6-5.8-72.9-16h-16.7C60.2 288 0 348.2 0 422.4V464c0 26.5 21.5 48 48 48h274.9c-2.4-6.8-3.4-14-2.6-21.3l6.8-60.9 1.2-11.1 7.9-7.9 77.3-77.3c-24.5-27.7-60-45.5-99.9-45.5zm45.3 145.3l-6.8 61c-1.1 10.2 7.5 18.8 17.6 17.6l60.9-6.8 137.9-137.9-71.7-71.7-137.9 137.8zM633 268.9L595.1 231c-9.3-9.3-24.5-9.3-33.8 0l-37.8 37.8-4.1 4.1 71.8 71.7 41.8-41.8c9.3-9.4 9.3-24.5 0-33.9z" class=""></path>
            </svg>
          </div>
          <div class="weui-cell__bd">
            <p>个人信息</p>
          </div>
          <div class="weui-cell__ft"></div>
        </router-link>
      </div>
      <div class="weui-cells" @click="playSound">
        <a class="weui-cell weui-cell_access" :href="mallUrl">
          <div class="weui-cell__hd">
            <svg class="mall-icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="5082">
              <path fill="currentColor" d="M427 202c-17.673 0-32-14.327-32-32 0-17.673 14.327-32 32-32h459c13.66 0 25.321 8.56 29.913 20.607 3.278 8.116 3.234 17.538-0.906 26.025L768.11 516.24a8 8 0 0 1-7.315 4.76h-356.18a8 8 0 0 0-7.022 4.165l-65.005 119a8 8 0 0 0 7.02 11.835H817c17.673 0 32 14.327 32 32 0 17.673-14.327 32-32 32H241.41c-8.837 0-16-7.163-16-16a16 16 0 0 1 2.067-7.867l114.725-203.176a8 8 0 0 0 0.336-7.2l-157.89-353.023a8 8 0 0 0-7.302-4.734H96c-17.673 0-32-14.327-32-32 0-17.673 14.327-32 32-32h105.842a32 32 0 0 1 29.176 18.856L399.57 457h320.795a8 8 0 0 0 7.325-4.784L837.542 202H427z m-83 758c-48.601 0-88-39.399-88-88s39.399-88 88-88 88 39.399 88 88-39.399 88-88 88z m0-60c-15.464 0-28-12.536-28-28s12.536-28 28-28 28 12.536 28 28-12.536 28-28 28z m422 60c-48.601 0-88-39.399-88-88s39.399-88 88-88 88 39.399 88 88-39.399 88-88 88z m0-60c-15.464 0-28-12.536-28-28s12.536-28 28-28 28 12.536 28 28-12.536 28-28 28z" p-id="5083"></path>
            </svg>
          </div>
          <div class="weui-cell__bd">
            <p>游戏商城</p>
          </div>
          <div class="weui-cell__ft"></div>
        </a>
      </div>
      <div class="weui-cells" @click="playSound" v-if="showRanking">
        <router-link class="weui-cell weui-cell_access" to="/Ranking">
          <div class="weui-cell__hd">
            <svg t="1557122876659" class="icon" style="width: 1em; height: 1em;vertical-align: middle;fill: currentColor;overflow: hidden;" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2247" data-spm-anchor-id="a313x.7781069.0.i0"><path d="M685 472.2v-328c0-6.6-5.4-12-12-12H352.1c-6.6 0-12 5.4-12 12v189.6c0 3.3-2.7 6-6 6H76.2c-6.6 0-12 5.4-12 12v596.5c0 6.6 5.4 12 12 12H949c6.6 0 12-5.4 12-12V490.2c0-6.6-5.4-12-12-12H691c-3.3 0-6-2.7-6-6z m-556.8 418V409.8c0-3.3 2.7-6 6-6h199.9c3.3 0 6 2.7 6 6v480.5c0 3.3-2.7 6-6 6H134.2c-3.3-0.1-6-2.8-6-6.1z m282.4 6c-3.3 0-6-2.7-6-6V339.8h-0.5V202.1c0-3.3 2.7-6 6-6H615c3.3 0 6 2.7 6 6v688.1c0 3.3-2.7 6-6 6H410.6z m480.4 0H691c-3.3 0-6-2.7-6-6v-342c0-3.3 2.7-6 6-6h200c3.3 0 6 2.7 6 6v342.1c0 3.2-2.7 5.9-6 5.9z" p-id="2248" fill="#d81e06" data-spm-anchor-id="a313x.7781069.0.i1"></path><path d="M472.9 259.8v37.7l32.8-28.5v115.8H541V231.3h-35.3zM264.4 521c12.3-12.9 19-21.6 19-37.7 0-28.9-20.7-46.3-49.1-46.3-26.7 0-49.6 16.6-49.6 46.8H220c0-11.9 7.8-14.9 14.2-14.9 9.1 0 13.8 5.8 13.8 14.2 0 6.5-2.2 10.3-7.8 16.4l-55.6 60.3v31.9h98.7v-31.9h-55.6l36.7-38.8zM791.8 607.8c7.3 0 14 5 14 14.7 0 6.9-4.1 14.4-14.7 14.4h-5v30.6h5c9.5 0 16.4 6.9 16.4 16.2 0 11-6.5 16.4-15.7 16.4-8.8 0-15.7-5.4-15.7-16.2h-35.3c0 34.5 25.6 48.1 51.1 48.1 26.9 0 51.1-15.1 51.1-47.2 0-18.3-9.3-27.6-17.7-33.4 7.8-5 15.9-13.1 15.9-30 0-26.5-20.9-45.5-49.4-45.5-27.4 0-49.4 17.5-49.4 46.3h35.3c0.1-9.2 6.7-14.4 14.1-14.4z" p-id="2249" fill="#d81e06"></path></svg>
          </div>
          <div class="weui-cell__bd">
            <p>销量排行榜</p>
          </div>
          <div class="weui-cell__ft"></div>
        </router-link>
      </div>
      <!-- <div class="weui-cells">
        <router-link class="weui-cell weui-cell_access" tag="div" to="/IdCard">
          <div class="weui-cell__hd">
           <svg aria-hidden="true" data-prefix="fas" data-icon="user-edit" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 640 512" class="info-icon"><path fill="currentColor" d="M224 256c70.7 0 128-57.3 128-128S294.7 0 224 0 96 57.3 96 128s57.3 128 128 128zm89.6 32h-16.7c-22.2 10.2-46.9 16-72.9 16s-50.6-5.8-72.9-16h-16.7C60.2 288 0 348.2 0 422.4V464c0 26.5 21.5 48 48 48h274.9c-2.4-6.8-3.4-14-2.6-21.3l6.8-60.9 1.2-11.1 7.9-7.9 77.3-77.3c-24.5-27.7-60-45.5-99.9-45.5zm45.3 145.3l-6.8 61c-1.1 10.2 7.5 18.8 17.6 17.6l60.9-6.8 137.9-137.9-71.7-71.7-137.9 137.8zM633 268.9L595.1 231c-9.3-9.3-24.5-9.3-33.8 0l-37.8 37.8-4.1 4.1 71.8 71.7 41.8-41.8c9.3-9.4 9.3-24.5 0-33.9z" class=""></path></svg>
          </div>
          <div class="weui-cell__bd">
            <p>身份证上传</p>
          </div>
          <div class="weui-cell__ft"></div>
        </router-link>
      </div> -->
      <!-- <div class="weui-footer lft-label">
        <p class="weui-footer__text">乐翻天@2017</p>
      </div> -->
    </div>
    <div class="weui-msg" v-show="!hasAccess && loaded" :style="outterStyle"  @click="playSound">
      <div class="weui-msg__icon-area"><i class="weui-icon-info weui-icon_msg"></i></div>
      <div class="weui-msg__text-area">
        <h2 class="weui-msg__title">您目前是普通用户</h2>
      </div>
      <div class="weui-msg__opr-area">
        <p class="weui-btn-area">
          <a class="weui-btn weui-btn_primary" :href="skipUrl">申请为代理</a>
        </p>
      </div>
      <div class="weui-msg__extra-area">
        <div class="weui-footer">
          <p class="weui-footer__text">乐翻天&copy;{{new Date().getFullYear()}}</p>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import { mapState, mapMutations } from 'Vuex'
import Marquee from 'vue-marquee';
export default {
  data() {
    return {
      outterStyle: {},
      showRun: true,
      limit: 5,
      offset: 0,
      noticeContent: '',
      marqueenDistance: 400,
      noticeSty: true,
      marqueenStyle: {
        transform: 'translateX(20px)'
      },
      jiazai: true,
      mallUrl: '',
      hideBP: true,
      inviteCode: '100000',
      showRanking: false,
    }
  },
  mounted() {
    this.getMallUrl();
    this.inviteCode = this.user.superId;
    this.outterStyle = {
      height: document.body.offsetHeight + 'px'
    }
    this.jiazai = true
    this.outterStyle = {
      height: document.body.offsetHeight + 'px'
    }
    setInterval(() => {
      if (this.marqueenDistance <= -400) {
        this.marqueenDistance = 400
      }
      this.marqueenDistance -= 5
      this.marqueenStyle = { transform: `translateX(${this.marqueenDistance}px)` }
      // console.log(this.marqueenStyle)
    }, 100)
    this.getNotice()
    // this.jiazai = false
    setTimeout(() => { this.jiazai = false }, 2000)
    this.showRanking = Cookies.get('areaCode') === 'hn_pj';

  },
  methods: {
    ...mapMutations(['changeUser']),
    playSound() {
      window.btn_sound.play();
    },
    toTenTimes(num) {
      let str = num + '';
      if (num <= 10) {
        return '10';
      }
      str = str.substring(0, str.length - 1) + '0'
      return str;
    },
    toTwoFifth(val) {
      return val
      // if (this.hideBP) {
      //   return val;
      // } else {
      //   return this.toTenTimes(Math.ceil(val * 2 / 5));
      // }
    },
    to2_5(val) {
      if (this.hideBP) {
        return val;
      } else {
        if(this.$refs.num1 &&this.$refs.num2 &&this.$refs.num3 &&this.$refs.num4 &&this.$refs.num5)
        return Number(this.$refs.num1.innerText) * 0.05 + Number(this.$refs.num2.innerText) * 0.1 + Number(this.$refs.num3.innerText) * 0.2 + Number(this.$refs.num4.innerText) * 0.1 + Number(this.$refs.num5.innerText) * 0.7;
      }
    },
    getMallUrl() {
      this.api.homePage.getMallUrl().then(res => res.json()).then(data => {
        console.log('getMallUrl', data)
        this.mallUrl = data.data.marketAddress + '&from=agentcenter';
      })
    },
    gotoBuyHistory() {
      window.btn_sound.play();
      this.$router.push({ path: 'buyHistory', query: { uid: this.user.uid } })
    },
    getNotice() {
      const send = {}
      this.api.homePage.getNoticeData(send).then(res => res.json()).then(data => {
        console.log('getNotice', data)
        if (data.result === 0) {
          this.noticeSty = true
          // this.showRun = false
          this.noticeContent = data.data.dataList[0].content
        } else if (data.result === 1) {
          this.noticeSty = false
        }
      })
    },

  },
  computed: {
    ...mapState(['api', 'source', 'loaded', 'user']),
    userType() {
      switch (this.user.role) {
        case 0:
          return '普通用户'
        case 1:
          {
            sessionStorage.setItem('userRole', '总代理')
            return '总代理'
          }
        case 2:
          return '一级代理'
        case 3:
          return '二级代理'
        default:
          return ''
      }
    },
    hasAccess() {
      return !(this.userType === '普通用户')
    },
    showSecond() {
      return this.userType === '总代理'
    },
    notSecond() {
      return this.userType !== '二级代理'
    },
    player() {
      return this.source.player || {}
    },
    team() {
      return this.source.team || { proxyLevelOne: {}, proxyLevelTwo: {}, proxyLevelThree: {}, proxyLevelEqual: {}, proxyLevelFour: {}, proxyLevelFive: {} }
    },
    teamCount() {
      return this.source.teamCount
    },
    playerCount() {
      return this.source.playerCount || 0
    },
    skipUrl() {
      return this.source.skipUrl
    },
    isSalesman() {
      return this.user.salesman
    },
  },
  components: {
    'vue-marquee': Marquee,
  }
}
</script>
<style lang="less">
.lft-label {
  position: absolute;
  margin-bottom: 5px;
}

.info-top {
  position: static;
  background-image: url(../img/banner.png);
  background-size: cover;
  background-position-x: center;

  .weui-grid__label {
    margin-top: 10px;
    color: white;
    font-size: 16px;
  }

  // &>a {
  //   min-height: 150px;
  // }
  .weui-grid,
  .weui-grids {
    position: static;
  }
}

.info-top-grid {
  text-align: center;
  width: 100%;
  height: 20px;

  .img-icon {
    height: 100%;
    vertical-align: sub;
  }

  span {
    margin-left: 5px;
    color: #FFFC00;
    font-size: 16px;
  }
}

.mt-22 {
  margin-top: 22px !important;
}

.user-img {
  width: 60px;
  height: 60px;
  margin: 0 auto 7px;

  img {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    border: solid 2px #FFFFFF;
  }
}

.header-two {
  height: 40px;
  width: 100%;
  // background: #D25D3A;
  text-align: center;
  line-height: 40px;
  color: #fff;
}

.sell-info {
  background: #fff;
  height: 40px;
  width: 100%;
  text-align: center;

  span {
    color: red
  }

  .weui-flex__item {
    line-height: 40px;
  }
}

.deep-title {
  display: flex;
  flex-wrap: nowrap;
  justify-content: space-between;

  .deep-padding {
    flex-basis: 36%;
    text-align: center;
  }
}

.info-middle {
  background-color: #fff;
  padding: 8px 0;
  display: flex;
  justify-content: flex-start;
  flex-direction: row;
  flex-wrap: wrap;
  position: relative;

  .divider {
    // position: absolute;
    background-color: #f0f0f0 !important;
    width: 100%;
    height: 1px;
  }

  .weui-grid {
    text-align: center;
    padding: 10px;
    color: #000;
  }

  .am-u-sm-3,
  .am-u-sm-4,
  .am-u-sm-6 {
    text-align: center;
    color: #000;
    border-right: 1px solid #f0f0f0;
    margin: 10px 0;
  }
}

.right-border {
  border-right: 1px solid #f0f0f0;
}

.grey-bg {
  background-color: #F4F4F4;
}

.weui-cell__hd {
  img {
    width: 20px;
  }

  img.big-icon {
    width: 40px;
  }
}

// .weui-cell_access {
//   height: 40px;
// }

.weui-cell__bd {
  padding-left: 15px;
}

.weui-footer {
  // position: absolute;
  margin-top: 30px;
  width: 100%;
  bottom: 0;
}


.border-line {
  border-bottom: 1px solid #e5e5e5
}

.text-normal {
  font-size: 14px;
}

.text-small {
  font-size: 10px !important;
}

.grey-border-bottom {
  border-bottom: 1px solid #f0f0f0;
}

.lock-icon {
  color: #ff5f5f;
}

.notice-content {
  position: fixed;
  top: 0.1rem;
}


.blue-icon {
  color: #00bcd4;
}

.green-icon {
  color: #49e187;
}

.info-icon {
  font-size: 1em;
  height: 1em;
  color: #3F51B5;
}

.mall-icon {
  font-size: 1.1em;
  height: 1.1em;
  color: #FF9800;
}

.weui-cell {
  padding: 6px 15px;
}
.userinfo-box{
  width: 100%;
}
.userinfo {
  color: white;
  white-space: nowrap;
  text-align: center;
}
</style>